//配置路由相关的信息
import VueRouter from 'vue-router'

import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

//路由懒加载,打包之后，一个懒加载对应一个js文件
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const Profile = () => import('../components/Profile')


//1.通过vue.use(插件)，安装插件
Vue.use(VueRouter)
//3.配置路由的映射关系,一个映射关系一个对象
const routes = [{
    path: '',
    redirect: '/home' //通过重定向，设置默认路径
  },
  {
    path: '/home',
    component: Home,
    //元数据
    meta: {
      title: '首页'
    },
    //嵌套路由
    children: [{
      path: '',
      redirect: 'message'
    }, {
      path: 'news',
      meta: {
        title: '新闻'
      },
      component: HomeNews
    }, {
      path: 'message',
      meta: {
        title: '消息'
      },
      component: HomeMessage
    }]
  }, {
    path: '/profile',
    component: Profile,
    //元数据
    meta: {
      title: '档案'
    },
  },
  {
    path: '/about',
    component: About,
    //元数据
    meta: {
      title: '关于'
    },
  }, {
    path: '/user/:userId',
    component: User,
    //元数据
    meta: {
      title: '用户'
    },
  }
]

//2.创建vueRouter对象
const router = new VueRouter({
  routes,
  mode: 'history' //使用history模式，默认是hash模式
});

//全局导航守卫-前置钩子（guard）
router.beforeEach((to, from, next) => {
  //从from跳转到to
//   document.title = to.meta.title;
//当有嵌套路由的时候使用下面写法
document.title=to.matched[0].meta.title;
  //必须调用next
  next();
})

//全局守卫-后置钩子(hook)
router.afterEach((to,from)=>{
    console.log('后置钩子')
})

export default router;
